<template>
  <div class="compTop">
    <div style="display:flex">
      <el-input placeholder="请输入搜索内容" style="width:320px;" v-model="searchText">
        <el-select
          v-model="selectVal"
          placeholder="全部"
          slot="prepend"
          style="width:100px"
          @change="changeSel"
        >
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchBy"></el-button>
      </el-input>
    </div>
    <div>
      <el-select
        v-model="selectComp"
        placeholder="选择物流公司"
        style="width:160px"
        @change="changeSelComp"
      >
        <el-option v-for="item in companyList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

@Component
export default class DeliverSelectComp extends Vue {
  @Prop({
    type: Array,
    default() {
      return [];
    },
  })
  companyList: any;

  /** 选择状态 */
  selectVal = "1";

  /** 选择物流公司 */
  selectComp = "";

  /** 搜索内容 */
  searchText = "";

  searchQuery = {
    address: "",
    integralOrders: "",
    integralGoodName: "",
    prizeOrderId: "",
    wxuserName: "",
  };

  /** 选择列表 */
  selectList = [
    {
      value: "1",
      label: "订单号",
    },
    {
      value: "2",
      label: "商品名称",
    },
    {
      value: "3",
      label: "客户",
    },
    {
      value: "4",
      label: "地址",
    },
  ];

  /** 选择状态 */
  changeSel(e) {
    this.$emit("changeSel", e);
    this.searchText = "";
  }

  /** 选择物流公司 */
  changeSelComp(e) {
    let name = "";
    this.companyList.forEach(item => {
      if (item.id === e) {
        name = item.name;
      }
    });
    this.$emit("changeSelComp", name);
  }

  init() {
    this.searchQuery.prizeOrderId = "";
    this.searchQuery.integralGoodName = "";
    this.searchQuery.wxuserName = "";
    this.searchQuery.address = "";
    this.searchText = "";
    this.searchBy();
  }

  /**
   * 搜索功能
   */
  searchBy() {
    this.searchQuery.prizeOrderId =
      this.selectVal === "1" ? this.searchText : "";
    this.searchQuery.integralGoodName =
      this.selectVal === "2" ? this.searchText : "";
    this.searchQuery.wxuserName = this.selectVal === "3" ? this.searchText : "";
    this.searchQuery.address = this.selectVal === "4" ? this.searchText : "";
    this.$emit("searchBy", this.searchQuery);
  }
}
</script>
    
<style lang="scss" scoped>
.compTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.search {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #dcdfe6;
  border-left: none;
  border-radius: 4px;
}
</style>
